<template>
	<view class="device-detail">
		<view class="detail-container shadow">
			<view class="detail-pic">
				<u--image width="100%" height="380rpx" src="/static/demo.jpg" mode=""></u--image>
			</view>
			<view class="detail-info">
				<view class="detail-info-header">
					<view class="detail-info-header-title">暗仿机1号</view>
					<view class="detail-info-header-body"><text>条码：SAGF004E</text><text>型号：暗访机</text></view>
				</view>
				<u-divider></u-divider>
				<view class="detail-info-body">
					<view class="line">设备详情</view>
					<view class="detail-info-msg">
						<u-row justify="space-between" gutter="10">
							<u-col span="6">
								<view class="cell">
									<view>设备名称：</view>
									<view>规格型号：</view>
									<view>存放地点：备份 2</view>
									<view>管理人员：</view>
								</view>
							</u-col>
							<u-col span="6">
								<view class="cell">
									<view>设备名称：</view>
									<view>规格型号：</view>
									<view>存放地点：备份 2</view>
									<view>管理人员：</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
	<u-button size="small" color="#377FEC" text="申请预约" @click="gotoOrder"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			gotoOrder(){
				uni.navigateTo({
					url:'/subpkg/device-order-form/device-order-form'
				})
			}
		}
	}
</script>

<style lang="scss">
	.device-detail {
		min-height: 100vh;
		background-color: #F6F6F6;
		padding: 18rpx;

		.detail-container {
			// width: 100%;
			background-color: #fff;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 52rpx;

			.detail-pic {
				height: 380rpx;
			}

			.detail-info {
				.detail-info-header {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 22rpx;

					.detail-info-header-title {
						color: #202D41;
						font-size: 18px;
					}

					.detail-info-header-body {
						margin-top: 32rpx;
						font-size: 12px;
						color: #666666;

						text {
							margin: 0 30rpx;
						}
					}
				}

				.detail-info-body {
					padding: 12rpx 24rpx;

					.line {
						font-size: 16px;
						height: 2rpx;
						margin: 20rpx 170rpx;
						line-height: 1px;
						border-left: 72rpx solid #202D41;
						border-right: 72rpx solid #202D41;
						text-align: center;
					}

					.detail-info-msg {
						margin-top: 46rpx;
						color: #999999;
						font-size: 12px;

						.cell {
							view {
								margin-bottom: 20rpx;
							}
						}

					}
				}


			}
		}
		.u-button {
			width: 196px !important;
			height: 36px;
		
			.u-button__text {
				font-size: 14px !important;
			}
		
		}
	}
	.u--image {
		width: 100%;
		height: 100%;
	}
</style>
